<template>
  <div class="login">
    <div class="van-top">
      <van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="van-bottom">
      <h3>手机验证码登录</h3>
      <van-form @submit="onSubmit">
        <van-cell-group inset style="padding: 15px 3px">
          <van-field
            v-model="user.phone"
            name="手机号码"
            placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请输入手机号码' }]"
          />
          <van-field
            v-model="user.code"
            type="text"
            name="验证码"
            placeholder="请输入短信验证码"
            :rules="[{ required: true, message: '请输入短信验证码' }]"
          >
            <template #button>
              <van-button size="small" type="primary" @click="handleGetCode"
                >发送验证码</van-button
              >
            </template>
          </van-field>
          <div style="margin: 35px 15px">
            <van-button round block type="primary" native-type="submit">
              登录
            </van-button>
          </div>
        </van-cell-group>
        <van-divider
          :style="{
            color: '#fff',
            borderColor: '#fff',
            padding: '50px 16px 15px',
          }"
        >
          或通过以下方式登录
        </van-divider>
        <div class="icons">
          <van-span>
            <van-icon
              name="wechat"
              style="
                color: #666ee8;
                line-height: 40px;
                margin-left: 8px;
                font-size: 22px;
              "
            />
          </van-span>
          <van-span>
            <van-icon
              name="qq"
              style="
                color: #666ee8;
                line-height: 40px;
                margin-left: 8px;
                font-size: 22px;
              "
            />
          </van-span>
          <van-span>
            <van-icon
              name="weibo"
              style="
                color: #666ee8;
                line-height: 40px;
                margin-left: 8px;
                font-size: 22px;
              "
            />
          </van-span>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Notify } from 'vant'
import 'vant/es/notify/style'
import { getCode } from '@/api/login'
import { Toast } from 'vant'
import { Dialog } from 'vant'

export default {
  name: '',
  data() {
    return {
      user: {
        phone: '',
        code: '',
      },
    }
  },
  components: {
    Notify,
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    /*
      获得验证码
     */
    async handleGetCode() {
      const reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (reg.test(this.user.phone)) {
        const result = await getCode(this.user.phone)
        console.log('验证码', result)
        Dialog({ message: `您的手机验证码是${result.code}`, width: '220px' })
        // this.user.code = result.code
      } else {
        // Notify({ type: 'danger', message: '请输入11位手机号' })
        Toast('请输入11位手机号')
      }
    },

    async onSubmit() {
      console.log('登陆成功', this.user)
      const loginResult = await this.$store.dispatch('loginAction', this.user)
      if (loginResult) {
        // 登录成功
        this.$router.push('/select')
      } else {
        Notify({ type: 'danger', message: '验证码有误' })
      }
    },
  },
}
</script>

<style lang="less" scoped>
.van-top /deep/ .van-nav-bar__title {
  font-size: 18px;
  font-weight: bold;
}
.van-top /deep/ .van-nav-bar .van-icon {
  color: black !important;
}
.van-bottom {
  background: -webkit-linear-gradient(top, #923bfb, #6e65ec);
  position: absolute;
  left: 0;
  top: 46px;
  bottom: 0;
  right: 0;
  margin: auto;
}
.van-bottom h3 {
  color: white !important;
  text-align: center;
  font-size: 24px;
  margin-top: 100px;
  margin-bottom: 30px;
}
.van-bottom /deep/ .van-form {
  width: 90%;
  position: absolute;
  left: 0;
  top: 166px;
  bottom: 0;
  right: 0;
  margin: auto;
}
.van-bottom /deep/ .van-form .icons {
  display: flex;
  justify-content: center;
}
.van-bottom /deep/ .van-form van-span {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  margin: 0 15px;
}
</style>
